@extends('layouts.backend')

@section('js_before')
    @include('vendor.table.assets')
@endsection

@section('content')
    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill h3 my-2">
                    文章管理
                </h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt">
                        <li class="breadcrumb-item">
                            <a class="link-fx" href="/">首页</a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            文章列表
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- END Hero -->
    <!-- Page Content -->
    <div class="content">
        <div class="block">
            <div class="block-header toolbar">
               @include('art.article.toolbar')
            </div>
            <div class="block-content block-content-full">
                @include('widgets.flash')
                @include('art.article.query')
                <table id="table" data-toggle="table">
                    <thead>
                        <tr>
                            <th data-checkbox="true"></th>
                            <th data-field="id" data-width="40">ID</th>
                            <th data-field="category_name" data-width="80">所属分类</th>
                            <th data-field="title" data-width="200" data-formatter="titleFormatter">标题</th>
                            <th data-field="click_count" data-align="center" data-width="60">阅读量</th>
                            <th data-field="state_name" data-align="center" data-width="60" data-formatter="stateFormatter">状态</th>
                            <th data-field="created_at" data-align="center" data-width="130">创建时间</th>
                            <th data-field="published_at" data-align="center" data-width="130">发布时间</th>
                            <th data-field="action" data-align="center" data-width="160"
                                data-formatter="actionFormatter" data-events="actionEvents">操作
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- END Page Content -->
    <script>
        $('#table').bootstrapTable({
            method: 'get',
            url: '/art/article/table',
            pagination: true,
            pageNumber: 1,
            pageSize: 15,
            pageList: [12, 50, 100, 200],
            sidePagination: 'server',
            clickToSelect: true,
            striped: true,

            onLoadSuccess: function (data) {
                $('#table tbody').sortable({
                    cursor: 'move',
                    axis: 'y',
                    revert: true,
                    start: function (e, ui) {
                        select_index = ui.item.attr('data-index');
                        original_y = e.pageY;
                    },
                    sort: function (e, ui) {
                        if (e.pageY > original_y) {
                            place_index = $(this).find('tr').filter('.ui-sortable-placeholder').prev('tr').attr('data-index');
                            move_down = 1;
                        }
                        else {
                            place_index = $(this).find('tr').filter('.ui-sortable-placeholder').next('tr').attr('data-index');
                            move_down = 0;
                        }
                    },
                    update: function (e, ui) {
                        var select_id = data.rows[select_index].id;
                        var place_id = data.rows[place_index].id;

                        if (select_id === place_id) {
                            return;
                        }

                        $.ajax({
                            url: '/art/article/sort',
                            type: 'post',
                            async: true,
                            data: {'_token': '{{ csrf_token() }}',select_id: select_id, place_id: place_id, move_down: move_down},
                            success: function (res) {
                                if (res.code !== 200) {
                                    $('#table tbody').sortable('cancel');
                                    $('#table').bootstrapTable('refresh');
                                }
                            },
                        });
                    }
                });
                $('#table tbody').sortable('disable');
            },
            queryParams: function (params) {
                var object = $('#form-query input,#form-query select').serializeObject();
                object['state'] = $('#state').val();
                object['_token'] = '{{ csrf_token() }}';
                object['offset'] = params.offset;
                object['limit'] = params.limit;
                return object;
            },
        });


        function actionFormatter(value, row, index) {
            var filedTopText = '置顶',filedHotText = '热门',filedHomeText = '首页';
            if (row.is_top === 1) {
                filedTopText = '取消' + filedTopText;
            }
            if (row.is_hot === 1) {
                filedHotText = '取消' + filedHotText;
            }
            if (row.is_home === 1) {
                filedHomeText = '取消' + filedHomeText;
            }
            return [
                '<div class="btn-group btn-group-sm">',
                '<button class="btn btn-primary edit" data-toggle="tooltip" data-placement="top" title="编辑"><i class="fa fa-fw fa-pencil-alt"></i></button>',
                '<button class="btn btn-danger remove" title="删除"><i class="fa fa-fw fa-times"></i></button>',
                '    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                '        更多' +
                '    </button>' +
                '    <div class="dropdown-menu dropdown-menu-right font-size-sm" aria-labelledby="btnGroupTabs1" x-placement="bottom-end" style="min-width:80px;position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(68px, 31px, 0px);">' +
                '        <a class="dropdown-item field" href="javascript:void(0)" data-field="top">' +
                '            ' + filedTopText +
                '        </a>' +
                '        <a class="dropdown-item field" href="javascript:void(0)" data-field="hot">' +
                '            '  + filedHotText +
                '        </a>' +
                '        <a class="dropdown-item field" href="javascript:void(0)" data-field="home">' +
                '            '  + filedHomeText +
                '        </a>' +
                '    </div>',
                '</div>',
            ].join('');
        }

        function titleFormatter(value, row, index) {
            var html = '';

            if (row.is_top === 1) {
                html += '<span class="badge badge-success">{{ \App\Models\Article::TAG_TOP }}</span><span> </span>';
            }
            if (row.is_hot === 1) {
                html += '<span class="badge badge-success">{{ \App\Models\Article::TAG_HOT }}</span><span> </span>';
            }
            if (row.is_home === 1) {
                html += '<span class="badge badge-success">{{ \App\Models\Article::TAG_HOME }}</span><span> </span>';
            }

            return [
                html + '<a href="/art/article/' + row.id + '" target="_blank" title="'+row.title+'">' + substr(row.title, 25) + '</a>',
            ]
        }

        function stateFormatter(value, row, index) {
            var style = 'primary';
            switch (row.state) {
                case 1:
                    style = 'primary';
                    break;
                case 2:
                    style = 'dark';
                    break;
                case 3:
                    style = 'warning';
                    break;
                case 9:
                    style = 'success';
                    break;
                case 0:
                    style = 'danger';
                    break;
            }
            return [
                '<span class="badge badge-' + style + '">' + row.state_name + '</span>',
            ].join('');
        }

        window.actionEvents = {
            'click .edit': function (e, value, row, index) {
                window.location.href = '/art/article/' + row.id + '/edit';

            },
            'click .remove': function (e, value, row, index) {
                if(confirm("确定要执行删除操作吗？")) {
                    $.ajax({
                        type: 'post',
                        data: {'_token': '{{ csrf_token() }}', '_method':'DELETE'},
                        url: '/art/article/' + row.id,
                        success: function (res) {
                            if(res.code === 200) {
                                $('#table').bootstrapTable('refresh');
                                return msg(res.message, 'success');
                            } else {
                                return msg(res.message, 'error');
                            }
                        }
                    });
                }
            },
            'click .field': function (e, value, row, index) {
                var node = e.target || e.toElement;
                $.ajax({
                    url: '/art/article/field/' + row.id + '/'+node.getAttribute('data-field'),
                    type: 'POST',
                    data: {'_token': '{{ csrf_token() }}'},
                    success: function (res) {
                        if(res.code === 200) {
                            $('#table').bootstrapTable('refresh');
                            return msg(res.message, 'success');
                        } else {
                            return msg(res.message, 'error');
                        }
                    }
                })
            },
        };
    </script>
@endsection
